<template>
	<view class="shop-luck" v-if="isLoad">

		<block v-if="detail.atv_id">
			<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
				:backgroundColor="color == '#ffffff' ?``:primaryColor" leftIcon="icon-left"
				:title="color == '#ffffff' ?``:`积分抽奖`">
			</uni-nav-bar>
			<image mode="aspectFill" lazy-load class="luck-bg abs" :src="detail.cover"> </image>
			<view class="my-integral flex-center abs">
				<view class="flex-y-baseline">
					<view class="integral-num f-big-title icon-font-color mr-sm">{{detail.user_integral}}</view>
					<view class="f-title c-base">积分</view>
				</view>
			</view>
			<view @tap="$refs.show_rule_item.open()" class="rule-btn-info flex-center abs">
				<view class="rule-btn flex-center radius">
					<i class="iconfont icon-wenhao mr-sm"></i>
					规则说明
				</view>
			</view>
			<view @tap.stop="getList('record',1)" class="record-btn flex-center f-caption c-base abs">抽奖记录</view>
			<view class="luck-dialog-info flex-center abs">
				<view class="dialog-info" :style="'-webkit-transform:rotate(' + deg + 'deg) translateZ(0);transform:rotate(' + deg
				+ 'deg) translateZ(0)'">
					<image class="dialog-img" src="https://lbqny.migugu.com/admin/farm/luck-dialog.png"> </image>
					<view class="item-luck flex-center flex-column abs" :class="[`luck-${index}`]"
						v-for="(item,index) in detail.data" :key="index">
						<view class="flex-center f-icontext text-bold c-warning mb-sm">{{item.title}}</view>
						<image mode="aspectFill"
							:class="[{'thank-you-img':!item.is_luck},{'icon-img radius-10':item.is_luck}]"
							:src="item.icon || thank_you_img">
						</image>
					</view>
				</view>
				<image @tap="toLuck" class="pointer-img abs" src="https://lbqny.migugu.com/admin/farm/luck-pointer.png">
				</image>
				<view class="use-integral flex-center f-icontext c-base abs">{{`${detail.integral}积分`}}</view>
			</view>

			<image class="num-img abs" src="https://lbqny.migugu.com/admin/farm/luck-num.png">
			</image>
			<view class="have-change abs flex-center f-caption c-base">还有<view class="num">{{detail.user_num}}次</view>
				抽奖机会
			</view>
			<view class="user-list abs">
				<image class="user-list-img abs" src="https://lbqny.migugu.com/admin/farm/luck-user-list.png">
				</image>
				<view class="title flex-center f-sm-title text-bold">中奖信息</view>
				<scroll-view scroll-y @scrolltolower="scrolltolower($event,'user')" :scroll-with-animation="true"
					lower-threshold="100" class="luck-user">
					<view class="mt-sm mb-sm" :style="{color:primaryColor}" v-for="(item,index) in list.user.data"
						:key="index">
						恭喜<span
							class="text ml-sm mr-sm">{{item.nickName.length > 5 ? `${item.nickName.substring(0,5)}...` : item.nickName}}</span>抽中了<span
							class="text ml-sm">
							{{item.type == 1? `1张卡券`:`${item.integral}积分`}}
						</span>
					</view>
					<view class="flex-center f-paragraph c-caption mt-sm" v-if="list.user.data.length ==0 ">
						暂无中奖信息，快来参加抽奖吧</view>
				</scroll-view>
			</view>
			<image class="squirrel-img abs" src="https://lbqny.migugu.com/admin/farm/squirrel.png">
			</image>
		</block>
		<block v-else>
			<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff" :backgroundColor="primaryColor"
				leftIcon="icon-left" title="积分抽奖">
			</uni-nav-bar>
			<abnor></abnor>
		</block>
		<uni-popup ref="show_rule_item">
			<view class="popup-rule">
				<view class="rule-info pd-lg fill-base radius-24">
					<view class="flex-center f-title c-title text-bold">规则说明</view>
					<view class="rule-text mt-lg f-paragraph">
						<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
					</view>
				</view>
				<i @tap="$refs.show_rule_item.close()" class="flex-center mt-lg iconfont icon-close c-base"></i>
			</view>
		</uni-popup>

		<uni-popup ref="show_record_item" type="center" :custom="true">
			<view class="popup-record rel">
				<image class="record-img abs" src="https://lbqny.migugu.com/admin/farm/luck-record.png"></image>
				<view class="record-title flex-center f-lg-title text-bold c-base abs">我的抽奖纪录</view>
				<view class="record-content fill-base abs">
					<scroll-view scroll-y @scrolltolower="scrolltolower($event,'record')" :scroll-with-animation="true"
						lower-threshold="100" class="luck-record">
						<view class="flex-center pt-md pb-md b-1px-b" v-for="(item,index) in list.record.data"
							:key="index">
							<image mode="aspectFill" class="icon-img" :class="[{'radius-4':item.is_luck}]"
								:src="item.icon || thank_you_img"></image>
							<view class="flex-1 flex-between ml-sm">
								<view :style="{color:item.is_luck?primaryColor: '#777'}">
									{{!item.is_luck ? item.title : item.type == 1? `1张卡券`:`${item.integral}积分`}}
								</view>
								<view class="f-caption c-caption">{{item.create_time}}</view>
							</view>
						</view>
						<view class="flex-center f-paragraph c-caption mt-sm" v-if="list.record.data.length ==0 ">
							暂无抽奖记录，快来参加抽奖吧</view>
					</scroll-view>
					<view @tap.stop="$refs.show_record_item.close()"
						class="confirm-btn flex-center f-sm-title text-bold c-base radius"
						:style="{background:primaryColor}">确定</view>
					<view class="space-lg"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				color: '#ffffff',
				detail: {},
				param: {
					record: {
						page: 1
					},
					user: {
						page: 1
					}
				},
				list: {
					record: {
						data: []
					},
					user: {
						data: []
					}
				},
				loading: true,
				// 抽奖信息
				thank_you_img: 'https://lbqny.migugu.com/admin/farm/thank-you.png',
				luckInd: 0,
				areaNumber: 9, //划分区域
				speed: 16, //速度
				deg: 0,
				singleAngle: '', // 每片扇形的角度
				isStart: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPageScroll(e) {
			let color = e.scrollTop < 20 ? '#ffffff' : '#000000'
			if (this.color == color) return
			this.color = color
		},
		methods: {
			async initIndex(refresh = false) {
				let {
					areaNumber
				} = this
				this.singleAngle = 360 / areaNumber
				await this.getDetail(refresh)
				this.isLoad = true
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail(refresh) {
				let data = await this.$api.shop.luckInfo()
				data.integral = parseInt(data.integral)
				this.detail = data
				if (refresh) {
					this.$util.hideAll()
					return
				}
				this.getList('user', 1)
				this.$util.hideAll()
			},
			async getList(type, page) {
				let {
					atv_id
				} = this.detail
				if (page) this.param[type].page = 1
				let param = this.param[type]
				param.id = atv_id
				let oldList = this.list[type]
				let methodModel = type == 'record' ? 'userLuckRecord' : 'luckRecord'
				let newList = await this.$api.shop[methodModel](param);
				if (this.param[type].page == 1) {
					this.list[type] = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list[type] = newList
				}
				this.loading = false
				this.$util.hideAll()
				if (type == 'record') {
					this.$refs.show_record_item.open()
				}
			},
			scrolltolower(e, type) {
				if (this.list[type].current_page >= this.list[type].last_page || this.loading) return
				this.param[type].page = this.param[type].page + 1
				this.loading = true
				this.getList(type)
			},
			// 用户点击开始抽奖
			async toLuck() {
				let {
					atv_id,
				} = this.detail
				let {
					id
				} = await this.$api.shop.luckDraw({
					id: atv_id
				})
				let index = this.detail.data.findIndex(item => {
					return item.id == id
				})
				this.luckInd = index
				this.toBegin()
				await this.initRefresh()
			},
			// 开始抽奖
			toBegin() {
				let {
					deg,
					singleAngle,
					speed,
					isStart,
					luckInd
				} = this
				if (isStart) return
				this.isStart = true
				let endAddAngle = 360 - (luckInd * singleAngle + singleAngle / 2); //中奖角度
				let rangeAngle = (Math.floor(Math.random() * 4) + 4) * 360; // 随机旋转几圈再停止
				let cAngle;
				deg = 0;
				this.timer = setInterval(() => {
					if (deg < rangeAngle) {
						deg += speed;
					} else {
						cAngle = (endAddAngle + rangeAngle - deg) / speed;
						cAngle = cAngle > speed ? speed : cAngle < 1 ? 1 : cAngle;
						deg += cAngle;

						if (deg >= endAddAngle + rangeAngle) {
							deg = endAddAngle + rangeAngle;
							this.isStart = false;
							clearInterval(this.timer);
							this.toSuccess()
						}
					}
					this.deg = deg
				}, 1000 / 60)
			},
			// 抽奖完成后操作
			toSuccess() {
				let {
					luckInd
				} = this
				let {
					title = '',
						is_luck = 0,
						type = 1,
						coupon_title = '',
						integral = 0
				} = this.detail.data[luckInd]
				let msg = !is_luck ? title : type == 1 ? `恭喜您获得1张卡券(${coupon_title})` : `恭喜您获得${integral}积分`
				this.$util.showToast({
					title: msg
				})
				this.getList('user', 1)
			},
		}
	}
</script>


<style lang="scss">
	.shop-luck {
		.luck-bg {
			top: 0;
			left: 0;
			width: 100%;
			height: 1912rpx;
		}

		.my-integral {
			top: 145rpx;
			width: 100%;
			height: 100rpx;

			.integral-num {
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				background: -webkit-linear-gradient(90deg, #FFFBCD, #F4F56F);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}


		.rule-btn-info {
			top: 351rpx;
			left: 0;
			width: 100%;
			height: 59rpx;

			.rule-btn {
				width: 204rpx;
				height: 59rpx;
				color: #0879CE;
				background: rgba(255, 255, 255, 0.6);

				.iconfont {
					color: rgba(8, 121, 206, 0.6);
				}
			}
		}

		.record-btn {
			top: 450rpx;
			right: 0;
			width: 150rpx;
			height: 53rpx;
			background: rgba(0, 107, 191, 0.48);
			border-radius: 100rpx 0 0 100rpx;
		}

		.luck-dialog-info {
			top: 451rpx;
			left: 102rpx;
			width: 545rpx;

			.dialog-info {

				.dialog-img {
					width: 545rpx;
					height: 541rpx;
					transform: rotate(-23deg);
				}

				.item-luck {
					width: 150rpx;
					height: 120rpx;

					.thank-you-img {
						width: 46rpx;
						height: 46rpx;
						margin-top: 3rpx;
					}

					.icon-img {
						width: 56rpx;
						height: 52rpx;
					}
				}

				.luck-0 {
					top: 60rpx;
					left: 250rpx;
					transform: rotate(20deg);
				}

				.luck-1 {
					top: 129rpx;
					left: 335rpx;
					transform: rotate(61deg);
				}

				.luck-2 {
					top: 238rpx;
					left: 352rpx;
					transform: rotate(101deg);
				}

				.luck-3 {
					top: 331rpx;
					left: 298rpx;
					transform: rotate(141deg);
				}

				.luck-4 {
					top: 368rpx;
					left: 196rpx;
					transform: rotate(180deg);
				}

				.luck-5 {
					top: 330rpx;
					left: 96rpx;
					transform: rotate(220deg);
				}

				.luck-6 {
					top: 238rpx;
					left: 42rpx;
					transform: rotate(260deg);
				}

				.luck-7 {
					top: 130rpx;
					left: 58rpx;
					transform: rotate(300deg);
				}

				.luck-8 {
					top: 60rpx;
					left: 141rpx;
					transform: rotate(340deg);
				}
			}


			.pointer-img {
				top: 174rpx;
				left: 183rpx;
				width: 179rpx;
				height: 210rpx;
			}

			.use-integral {
				top: 305rpx;
				left: 205rpx;
				width: 135rpx;
				transform: scale(0.7);
			}
		}

		.num-img {
			top: 903rpx;
			left: 124rpx;
			width: 502rpx;
			height: 236rpx;
		}

		.have-change {
			top: 1060rpx;
			left: 0;
			width: 100%;
			height: 50rpx;

			.num {
				color: #FFEA8F;
			}
		}

		.user-list {
			top: 1187rpx;
			left: 45rpx;
			width: 660rpx;
			height: 616rpx;
			z-index: 2;

			.user-list-img {
				top: 0;
				left: 0;
				width: 660rpx;
				height: 616rpx;
				z-index: -1;
			}

			.title {
				height: 68rpx;
				color: #AB5D10;
			}

			.luck-user {
				width: 560rpx;
				height: 480rpx;
				padding: 20rpx 50rpx;

				.text {
					color: #FF8A00;
				}

			}
		}

		.squirrel-img {
			top: 1730rpx;
			right: 30rpx;
			width: 141rpx;
			height: 141rpx;
			z-index: 2;
		}

		.popup-rule {
			width: 596rpx;
			margin: 0 auto;

			.rule-info {
				margin-top: 10vh;

				.rule-text {
					color: #4A4A4A;
					line-height: 1.4;
					min-height: 100rpx;
					max-height: 60vh;
					overflow: auto;
				}
			}

			.icon-close {
				font-size: 70rpx;
			}
		}


		.popup-record {
			width: 715rpx;
			height: 800rpx;

			.record-img {
				top: 0;
				left: 0;
				width: 715rpx;
				height: 163rpx;
			}

			.record-title {
				top: 0;
				left: 0;
				width: 100%;
				height: 100rpx;
			}

			.record-content {
				top: 99rpx;
				left: 55rpx;
				width: 608rpx;
				border-radius: 0 0 24rpx 24rpx;

				.luck-record {
					min-height: 100rpx;
					max-height: 50vh;
					width: 546rpx;
					padding: 30rpx;

					.icon-img {
						width: 61rpx;
						height: 61rpx;
					}
				}

				.confirm-btn {
					width: 415rpx;
					height: 80rpx;
					margin: 0 auto;
				}
			}
		}
	}
</style>
